<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <script type="text/javascript" charset="utf-8">
    	var mainView, shareView;
		var showShare = false;
      	mui.init();
		mui.plusReady(function() {
		    mainView = plus.webview.currentWebview();
		  	//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
			setTimeout(function () {
				shareView = mui.preload({
					id: 'prodect_share_pop',
					url: 'product_share/prodect_share_pop.html',
					styles: {
						top: '70%',
						bottom: '0%'
					}
				});
				
				window.addEventListener('cancelShare', closeShareView);
			},300);
			
		  	//监听头部按钮点击事件
			mui('#mainHeadar').on('tap', 'a', openShareView);
						
			//监听底部按钮点击事件
	      	mui('#footButton').on('tap', 'a', function() {
				var id = this.getAttribute('href');
				var href = this.href;
				var topHeaderPos = document.getElementById("mainHeadar").offsetHeight + 1;
				var footNavPos = document.getElementById("footButton").offsetHeight + 1;
	  			mui.openWindow({
					id: id,
					url: this.href,
					styles: {
						popGesture: 'close',
						bottom: footNavPos,
						top: topHeaderPos
					}
				});
				
		  	});
		  	
		    mui.trigger(document.getElementById("defaultTab"), "tap");
		});
		
		    
		/*
		 * 显示菜单菜单
		 */
		function openShareView() {
			if (!showShare) {
				//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
				if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
					document.querySelector("header.mui-bar").style.position = "static";
					//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
					document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
				}
				var allView = plus.webview.all();
				for (var i = 0; i < allView.length; i++) {
					if (allView[i].isVisible()) {
						allView[i].setStyle({mask:'rgba(0,0,0,0.3)'});
						allView[i].addEventListener('maskClick', closeShareView);
					}
				}
				
				shareView.show('slide-in-bottom');
				showShare = true;
			}
		}
		
		/**
		 * 关闭侧滑菜单(业务部分)
		 */
		function closeShareView() {
			if (showShare) {
				//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
				if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
					document.querySelector("header.mui-bar").style.position = "fixed";
					//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
					document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "44px";
				}
				shareView.hide('none');
				//window.removeEventListener('cancelShare', closeShareView());
				var allView = plus.webview.all();
				for (var i = 0; i < allView.length; i++) {
					allView[i].setStyle({mask:'none'});
				}
				showShare = false;
			}
		}
    </script>
</head>
<body>
	<header id="mainHeadar" class="mui-bar mui-bar-nav">
		<a id="icon-more" href="#picture"><span class="mui-icon mui-icon-more mui-pull-right"></span></a>
		<h1 class="mui-title">Hello mui</h1>
	</header>
	
	<!--
    <div class="mui-content mui-row mui-fullscreen">
    	<p align="center">拼了老命加载<span class="mui-spinner"></span></p>
    </div>
    -->
    
	<!--
    	作者：261469006@qq.com
    	时间：2016-10-21
    	描述：底部标签
    -->
	<nav id="footButton" class="mui-bar mui-bar-tab">
		<a id="defaultTab" class="mui-tab-item mui-active" href="product_display/prodect_display_main.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="user_info/user_info_setting.html">
			<span class="mui-icon mui-icon-person"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
</body>
</html>